<template>
  <div>
    <CategorySelector />
    <el-card class="mt10">
      <el-button type="primary" icon="el-icon-plus" disabled>
        添加属性
      </el-button>

      <el-table border>
        <el-table-column label="序号" width="80px" align="center" />
        <el-table-column label="属性名称" width="150px" />
        <el-table-column label="属性值列表" />
        <el-table-column label="操作" width="150px" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import CategorySelector from '@/components/CategorySelector/index.vue'
import { reqAttrList } from '@/api/product/attrList'
import { mapState } from 'vuex'
export default {
  name: 'Attr',
  data() {
    return {
      attrList: [],
      id: '',
      attrName: '',
      attrValueList: [],
      category1Id: [],
      category2Id: [],
      category3Id: []
    }
  },

  methods: {
    async getAttrList() {
      const res = await reqAttrList({ category1Id, category2Id, category3Id })
      console.log(res)
    }
  },
  computed: {
    ...mapState,
    category1Id: (state) => state.category.category1Id,
    category2Id: (state) => state.category.category2Id,
    category3Id: (state) => state.category.category3Id
  },
  watch: {
    async category3Id(newVal, oldVal) {
      // console.log(newVal, oldVal)
      if (!newVal) return
      this.getAttrList()
    }
  }
}
</script>

<style lang="less" scoped></style>
